<template>
  <div class="member">
    <van-nav-bar title="会员中心" left-arrow @click-left="back" />
    <div class="container">
      <div class="top">
        <div class="left">
          <div class="header">
            <img :src="info.uheader" alt />
          </div>
          <p class="number">{{info.uname}}</p>
        </div>
        <div class="right">
          <p class="welcome">欢迎</p>
          <p class="join">加入造作会员</p>
          <button class="knowVip" v-tap="{methods:knowvip}">了解会员体系</button>
        </div>
      </div>
      <div class="content">
        <p class="title">成为会员，享受丰富特权</p>
        <ul class="list">
          <li>
            <div class="icon">
              <i class="iconfont icon-xunzhang"></i>
            </div>
            <p>￥23000升级礼</p>
            <p>多档优惠低至88折</p>
          </li>
          <li>
            <div class="icon">
              <i class="iconfont icon-dangao"></i>
            </div>
            <p>￥2600生日礼</p>
            <p>
              价值￥550实物礼
              <br />+￥2000优惠券
            </p>
          </li>
          <li>
            <div class="icon">
              <i class="iconfont icon-shafa1"></i>
            </div>
            <p>专属会员价</p>
            <p>精选商品专属优惠</p>
          </li>
          <li>
            <div class="icon">
              <i class="iconfont icon-xiangji1"></i>
            </div>
            <p>9%晒单返券</p>
            <p>
              成交价9%全场券
              <br />奖励
            </p>
          </li>
          <li>
            <div class="icon">
              <i class="iconfont icon-lingdang1"></i>
            </div>
            <p>会员惊喜</p>
            <p>
              不定期会员活动
              <br />给你惊喜
            </p>
          </li>
          <li>
            <div class="icon">
              <i class="iconfont icon-shouhuodizhi"></i>
            </div>
            <p>线下活动</p>
            <p>线下活动优先受邀请</p>
          </li>
        </ul>
      </div>
      <div class="footer" @click="tap">一步成为会员</div>
      <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
        <div class="info">
          <p>完善任意2项资料</p>
          <p>即可快速成为会员，享受特权</p>
          <dl class="infobox">
            <dt>设置头像</dt>
            <dt>设置生日</dt>
            <dt>设置昵称</dt>
            <dt>设置性别</dt>
          </dl>
          <p class="know">多谢了解，会员惊喜更贴心</p>
            <button class="sbtn" v-tap="{methods:setting}">去设置</button>
        </div>
        <p>你还可以通过购物、分享等方式成为会员,</p>
        <p>可点击<router-link class="detail" to="/membergrow">了解会员体系</router-link>查看详情</p>
      </van-popup>
    </div>
  </div>
</template>

<script>
import * as api from "../api/User";
export default {
  name: "membercenter",
  methods: {
    back() {
      this.$router.go(-1);
    },
    tap() {
      this.show = !this.show;
    },
    setting(){
      this.$router.push("/setting");
    },
    knowvip(){
      this.$router.push("/membergrow");
    }
  },
  data() {
    return {
      show: false,
      info:[],
    };
  },
  mounted(){
    api.getOneUser().then((data)=>{
        this.info = data.data.result[0];
        if(this.info.uheader == 'null' || this.info.uheader == null){
           this.info.uheader = 'http://b-ssl.duitang.com/uploads/item/201708/03/20170803110819_FTyfE.jpeg';
        }
      })
  }
};
</script>

<style scoped>
.van-ellipsis{
    font-size:30px;
}
.van-icon {
  color: #333;
}
.container .top {
  padding: 40px 70px;
  overflow: hidden;
}
.container .top .left .header {
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
}
.container .top .left .header img {
  width: 100%;
}
.container .top .left .number {
  color: #666;
}
.container .top .left {
  float: left;
  margin-top: 20px;
}
.container .top .right {
  float: right;
}
.container .top .right p {
  margin: 0;
}
.container .top .right .welcome {
  font-size: 70px;
  text-align: right;
  color: rgb(229, 106, 105);
}
.container .top .right .join {
  font-size: 30px;
  text-align: right;
}
.container .top .right .knowVip {
  width: 250px;
  height: 50px;
  display: inline-block;
  font-size: 26px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0.5px;
  border: #dbdbdb 2px solid;
  border-radius: 5px;
  color: #313131;
  text-align: center;
  background: #fff;
  margin-top: 20px;
}
.content {
  padding: 0 50px 80px;
  overflow: hidden;
}
.content .title {
  padding-top: 35px;
  font-size: 30px;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0;
}
.content .list li i {
  color: rgb(229, 106, 105);
  font-size: 50px;
}
.content .list li .icon-xunzhang,
.content .list li .icon-dangao,
.content .list li .icon-shafa1 {
  font-size: 70px;
}
.content .list li {
  width: 49.2%;
  float: left;
  padding: 45px 0 0;
}
.content .list li .icon {
  text-align: center;
  margin-bottom: 15px;
}
.content .list li p {
  text-align: center;
  margin: 0;
}
.content .list li p:nth-of-type(1) {
  font-size: 28px;
}
.content .list li p:nth-of-type(2) {
  font-size: 22px;
  color: #666;
}
.footer {
  width: 100%;
  height: 100px;
  background: rgb(229, 106, 105);
  position: fixed;
  bottom: 0;
  text-align: center;
  line-height: 100px;
  font-size: 26px;
  color: #fff;
}
.info {
  padding: 50px 90px;
  border-bottom:#eee solid 1px; 
  margin-bottom: 30px;
}
.info p {
  text-align: center;
  color: rgb(229, 106, 105);
  font-size: 30px;
  margin: 0;
  line-height: 46px;
  font-weight: bold;
}
.infobox {
  padding-top: 40px;
  text-align: left;
}
.infobox dt::before {
  content: "•";
  width: 15px;
  height: 26px;
  font-size: 30px;
  line-height: 26px;
  margin-right: 5px;
  position: relative;
  top: 3px;
}
.infobox dt {
  width: 49.2%;
  height: 26px;
  margin-bottom: 15px;
  line-height: 26px;
  display: inline-block;
  font-size: 28px;
  color: #313131;
  text-align: center;
}
.know{
    color: #666;
}
.sbtn{
    width: 200px;
    height: 80px;
    margin: 50px auto;
    margin-bottom: 0;
    background: #e56a69;
    border: #e56a69 2px solid;
    color: #fff;
    font-size: 26px;
    line-height: 60px;
    font-weight: 700;
    border-radius: 5px;
    margin-left: 200px;
}
.van-popup>p{
    text-align: center;
    color: #666;
    margin:5px;
}
.van-popup>p .detail{
    color: #e56a69;
}


</style>